<template>
    <div class="easyd-weixin-Box">

        <div class="app_page_box" style="bottom: 50px;">
            <div class="app_page">

                <div class="objection_info app_box_content_list app_list_box MARGIN_BOTTOM_10">
                    <div class="app_box_flex">
                        <div class="app_box_content_left">
                            <img src="../../../../dist/static/images/shangpin2.jpg"/>
                            <span>{{feedbackDetail.sq_nickname}}</span>
                        </div>
                        <div class="app_box_content_right">
                            <span class="T4" v-if="feedbackDetail.sq_status>0" style="color: #999999">已处理</span>
                            <span class="T4" v-else style="color: #3aff56">待解决</span>
                        </div>
                    </div>
                    <div class="">
                        <span class="C4">反馈描述:</span>
                        <div class="MARGIN_BOTTOM_10">
                            {{feedbackDetail.sq_content}}
                        </div>
                        <div class="app_box_flex">
                            <div class="app_box_content_left">
                                <span class="T3"
                                      style="color: #fbd415;">{{feedbackTypeArr[feedbackDetail.sq_type]}}</span>
                            </div>
                            <div class="app_box_content_right">
                                <span class="C4 T4">反馈时间：{{$common.getTimes(feedbackDetail.sq_create_time,'cn')}}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content_area app_box_content_list app_list_box MARGIN_BOTTOM_10">
                    <span>回复反馈：</span>
                    <div class="add_box" v-for="(item,index) in feedbackDetail.new_sq_reply">
                        <div class="add_img" v-if="item.type == '1'">
                            <span class="C4" v-if="item.txt==''">点击上传图片</span>
                            <img v-else :src="item.txt"/>
                        </div>
                        <div class="add_txt" v-else-if="item.type == '0'">
                            <textarea name="" rows="10" v-model="item.txt" cols="" placeholder="请输入内容"></textarea>
                        </div>
                        <div class="add_video" v-else-if="item.type == '3'">
                            <video width="" height="">
                                <source src="myvideo.mp4" type="video/mp4"></source>
                                <source src="myvideo.ogv" type="video/ogg"></source>
                                <source src="myvideo.webm" type="video/webm"></source>
                                <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
                                    <param name="movie" value="myvideo.swf"/>
                                    <param name="flashvars" value="autostart=true&amp;file=myvideo.swf"/>
                                </object>
                                当前浏览器不支持 video直接播放，点击这里下载视频：
                                <a href="myvideo.webm">下载视频</a>
                            </video>
                        </div>
                        <i class="fa  fa-times-circle-o" @click="removeItem(index)"></i>
                    </div>

                    <!--<p class="content_area_info C4"><span class="fa fa-edit"></span>点击下方添加内容</p>-->

                    <div class="content_area_btn app_box_flex">
                        <div class="app_box_flex_1" @click="addBox('0')">
                            <span class="fa fa-file-text-o"></span>
                            <p>添加文字</p>
                        </div>
                        <div class="app_box_flex_1" @click="addBox('1')">
                            <span class="fa fa-image"></span>
                            <p>添加图片</p>
                        </div>
                        <!--<div class="app_box_flex_1">
                            <span class="fa fa-video-camera"></span>
                            <p>添加视频</p>
                        </div>-->
                    </div>
                </div>

                <div class="app_list_box MARGIN_BOTTOM_10">

                    <div class="app_box_content" @click="isApplySaveAsKnowledge(feedbackDetail.sq_apply_knowledge_status)">
                        <div class="app_box_content_left">
                            <span>是否申请加入知识库</span>
                        </div>
                        <div class="app_box_content_right">
                            <span v-if="applyId == '1'">是</span>
                            <span v-else>否</span>
                            <span class="fa fa-angle-right fa-lg C2"></span>
                        </div>
                    </div>

                </div>
                <div class="app_list_box">
                    <div class="app_box_content" @click="feedbackType()">
                        <div class="app_box_content_left">
                            反馈类型
                        </div>
                        <div class="app_box_content_right">
							<span class="T3 C4">
								<span v-if="objectionData.typeId">{{feedbackTypeArr[objectionData.typeId]}}</span>
								<span v-else>{{feedbackTypeArr[feedbackDetail.sq_type]}}</span>
							</span>
                            <span class="fa fa-angle-right fa-lg C2"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="app_bottom_box">
            <div class="app_bottom_box_right" @click="submit()">
                提交回复
            </div>
        </div>

    </div>
</template>

<script>
    import {mapState, mapMutations} from "vuex";

    export default {

        beforeRouteEnter(to, from, next) {
            if (from.path == '/select_apply') {
                to.meta.isBack = true;
            }
            next();
        },
        data() {
            return {
                dataList: [{
                    type: '0',
                    txt: ''
                }], //数据
                feedbackTypeArr: ['行业知识', '产品知识', '销售技巧'], //反馈类型
            };
        },
        computed: {
            ...mapState({
                feedbackDetail: state => state.ReplyObjectionModule.feedbackDetail,
                applyId: state => state.ReplyObjectionModule.applyId,
                applyName: state => state.ReplyObjectionModule.applyName,
                objectionData: state => state.ObjectionModule.objection,
            })
        },
        mounted() {
            //如果为后退回来的界面,不在进行编辑数据的请求
            if (!this.$route.meta.isBack) {
                if (this.$route.query.sq_id) {
                    this.initData();
                    console.log('正常打开带参数页面')
                }
                console.log('正常打开页面')
            } else {
                console.log('返回页面')
                console.log(this.applyId)
            }

            this.$route.meta.isBack = false;
        },
        methods: {

            //  ...mapMutations(["ShopIndexModule/updateIsShopGuide"]),
            initData() {
                this.$easyUtil.startLoading(this)
                this.$http.getHttp(
                    this.$API.feedbackReply + "/sq_id/" + this.$route.query.sq_id,
                    rs => {

                        console.log(rs)
                        if (rs.feedbackInfo[0].sq_reply == null || rs.feedbackInfo[0].sq_reply == undefined) {
                            rs.feedbackInfo[0].new_sq_reply = [{
                                type: '0',
                                txt: ''
                            }]
                        } else {

                            rs.feedbackInfo[0].new_sq_reply = JSON.parse(rs.feedbackInfo[0].sq_reply);

                            for (var ss = 0; ss < rs.feedbackInfo[0].new_sq_reply.length; ss++) {
                                if (rs.feedbackInfo[0].new_sq_reply[ss].type == '0' && (rs.feedbackInfo[0].new_sq_reply[ss].txt != '')) {
                                    rs.feedbackInfo[0].new_sq_reply[ss].txt = rs.feedbackInfo[0].new_sq_reply[ss].txt.replace(/<br\/>/g, '\n');
                                }
                            }

                        }
                        this.$store.commit("ReplyObjectionModule/updateFeedbackDetail", rs.feedbackInfo[0]);
                        this.$store.commit("ReplyObjectionModule/updateApplyId", rs.feedbackInfo[0].sq_apply_knowledge_status);

                        this.$easyUtil.endLoading(this)

                    }
                );
            },
            //添加块
            addBox(type) {
                var item = {
                    type: type,
                    txt: ''
                }
                this.feedbackDetail.new_sq_reply.push(item);
            },
            //删除块
            removeItem(index) {
                console.log(index)
                console.log(this.feedbackDetail.new_sq_reply[index].txt)
                this.feedbackDetail.new_sq_reply.splice(index, 1);
            },
            //提交回复
            submit() {
                // artSalesQuestionUpdate
                for (var ss = 0; ss < this.feedbackDetail.new_sq_reply.length; ss++) {
                    if (this.feedbackDetail.new_sq_reply[ss].type == '0' && (this.feedbackDetail.new_sq_reply[ss].txt != '')) {
                        this.feedbackDetail.new_sq_reply[ss].txt = this.feedbackDetail.new_sq_reply[ss].txt.replace(/\n/g, '<br/>');
                    }
                }

                var params = {
                    update_where: 'sq_id',
                    sq_id: this.$route.query.sq_id,
                    sq_title: this.feedbackDetail.sq_content,
                    sq_reply: JSON.stringify(this.feedbackDetail.new_sq_reply),
                    sq_reply_time: (new Date() / 1000),
                    sq_status: 1,
                    sq_apply_knowledge_status: this.applyId,
                }

                if(this.feedbackTypeArr[this.objectionData.typeId]){
                    params.sq_type = this.objectionData.typeId;
                }

                console.log(params);
                // return;
                this.$easyUtil.startLoading(this)
                this.$http.postHttp(this.$API.artSalesQuestionUpdate, params, (rs) => {

                    this.$easyUtil.endLoading(this)
                    this.$easyUtil.successToast(this, '反馈回复成功');
                    this.$store.commit('ObjectionModule/clearObjectionData');
                    history.go(-1);

                })
            },
            isApplySaveAsKnowledge(num) {
                if(parseInt(num)>0){
                    this.$easyUtil.errorToast(this, '已提交过申请，请勿重复提交');
                }
                this.$easyUtil.GO(this, '/select_apply')
            },
            feedbackType() {
                this.$router.push({
                    path: '/feedbackType',
                    query:{
                        source: "reply"
                    }
                })
            },
        }
    };
</script>

<style lang="stylus" scoped>
    @import '~PUBLIC_CSS';
    .objection_info .app_box_content_left img {
        float: left;
        width: 30px;
        height: 30px;
        object-fit: cover;
        border-radius: 100px;
        margin-right: 10px;
    }

    .content_area {
        padding: 10px;
    }

    .content_area .add_box {
        position: relative;
    }

    .content_area .add_box .add_img {
        height: 250px;
        margin-bottom: 10px;
        border: 1px dotted #FBD415;
        padding: 10px;
        position: relative;
    }

    .content_area .add_box .add_img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .content_area .add_box .add_img span {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        line-height: 250px;
        text-align: center;
    }

    .content_area .add_box .add_txt {
        margin-bottom: 10px;
        border: 1px dotted #FBD415;
        padding: 10px;
    }

    .content_area .add_box .add_txt textarea {
        width: 100%;
        border: 0;
        font-size 15px;
    }

    .content_area .add_box .add_video {
        margin-bottom: 10px;
        border: 1px dotted #FBD415;
        padding: 10px;
    }

    .content_area .add_box .add_video video {
        width: 100%;
    }

    .content_area .add_box i {
        position: absolute;
        top: -10px;
        right: -10px;
        color: red;
        font-size: x-large;
    }

    .content_area .content_area_info {
        text-align: center;
        padding: 50px;
    }

    .content_area .content_area_info span {
        font-size: x-large;
        padding-right: 5px;
    }

    .content_area .content_area_btn {
    }

    .content_area .content_area_btn .app_box_flex_1 {
        text-align: center;
        background: #d6d6d6;
        padding: 10px 5px;
        margin-right: 5px;
    }

    .content_area .content_area_btn .app_box_flex_1:last-child {
        margin-right: 0px;
    }

    .content_area .content_area_btn .app_box_flex_1 span {
        font-size: x-large;
    }

    .content_area .content_area_btn .app_box_flex_1 p {
        line-height: initial;
    }
</style>